<template>
    <div class="me-setting">
      <div>
        <me-common-cell left-icon="itlike-2" left-title="免密码支付" :clickCell="handleClick"></me-common-cell>
        <me-common-cell left-icon="itlike-3" left-title="免拼单设置" :clickCell="handleClick"></me-common-cell>
        <me-common-cell left-icon="itlike-1" left-title="消息接收设置" :clickCell="handleClick"></me-common-cell>
      </div>
      <div style="margin-top: 10px">
        <me-common-cell left-icon="itlike-5" left-title="常见问题" :clickCell="handleClick"></me-common-cell>
        <me-common-cell left-icon="itlike-4" left-title="意见反馈" :clickCell="handleClick"></me-common-cell>
      </div>
      <div style="margin-top: 10px">
        <me-common-cell left-icon="itlike-2" left-title="商家免费入驻" :clickCell="handleClick"></me-common-cell>
      </div>
      <div class="login-out" @click="handleLoginOut">
        退出登录
      </div>
    </div>
</template>

<script>
    import MeCommonCell from './MeCommonCell.vue'
    import { Toast,MessageBox } from 'mint-ui'
    import  {mapActions} from 'vuex'
    export default {
        name: 'MeSetting',
        components:{
          MeCommonCell
        },
        methods: {
          ...mapActions(['getLoginOut']),
          handleClick(props){
            Toast('点击了'+ props);
          },
          handleLoginOut(){
            MessageBox.confirm('您确定退出登录吗?').then(action => {
              if(action === 'confirm') {
                // 删除前台vuex中的用户信息
                // 删除服务端保存的session(也有的公司使用cookie保存数据)
                this.getLoginOut({});  // 这里也可以通过dispatch的方式向actions提交
                // 回到主界面
                this.$router.replace('/home');
              }
            });
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .login-out
    margin-top 10px
    width 100%
    height 44px
    background-color: #fff
    display flex
    justify-content center
    align-items center
    text-align center
</style>
